<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社交网站 - 我的页面</title>
    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            overflow-x: hidden;
        }
        
        .profile-container {
            max-width: 480px;
            margin: 0 auto;
            background-color: white;
            min-height: 100vh;
            position: relative;
            transition: background-color 0.3s ease;
        }
        
        /* 简约风格 */
        .style-simple .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 20px 50px;
            text-align: center;
        }
        
        .style-simple .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            margin-top: -60px;
            object-fit: cover;
        }
        
        .style-simple .profile-info {
            padding: 20px;
            text-align: center;
        }
        
        .style-simple .stats {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        
        .style-simple .stat-item {
            text-align: center;
        }
        
        .style-simple .stat-number {
            font-weight: bold;
            font-size: 18px;
            display: block;
        }
        
        .style-simple .stat-label {
            font-size: 12px;
            color: #666;
        }
        
        /* 社交风格 */
        .style-social .profile-header {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 30px 20px;
        }
        
        .style-social .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid white;
            object-fit: cover;
        }
        
        .style-social .profile-info {
            padding: 20px;
            background-color: #fff;
        }
        
        .style-social .stats {
            background-color: #f8f9fa;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
        }
        
        .style-social .stat-item {
            text-align: center;
        }
        
        .style-social .stat-number {
            font-weight: bold;
            display: block;
        }
        
        .style-social .stat-label {
            font-size: 12px;
            color: #666;
        }
        
        .style-social .friends-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        
        .style-social .friend-avatar {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 8px;
            object-fit: cover;
        }
        
        /* 媒体风格 */
        .style-media .profile-header {
            position: relative;
            height: 200px;
            overflow: hidden;
        }
        
        .style-media .cover-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .style-media .avatar {
            position: absolute;
            bottom: -50px;
            left: 20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid white;
            object-fit: cover;
        }
        
        .style-media .profile-info {
            padding: 60px 20px 20px;
        }
        
        .style-media .media-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            margin-top: 15px;
        }
        
        .style-media .media-item {
            aspect-ratio: 1;
            overflow: hidden;
        }
        
        .style-media .media-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 个人品牌风格 */
        .style-brand .profile-header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px 20px;
        }
        
        .style-brand .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid white;
            object-fit: cover;
        }
        
        .style-brand .profile-info {
            padding: 20px;
        }
        
        .style-brand .achievements {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
        }
        
        .style-brand .achievement-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .style-brand .achievement-icon {
            background-color: #e3f2fd;
            color: #1976d2;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        
        /* 暗黑风格 */
        .style-dark {
            background-color: #121212;
            color: #ffffff;
        }
        
        .style-dark .profile-container {
            background-color: #1e1e1e;
            color: #ffffff;
        }
        
        .style-dark .profile-header {
            background: linear-gradient(135deg, #3a1c71 0%, #d76d77 50%, #ffaf7b 100%);
            color: white;
            padding: 30px 20px;
        }
        
        .style-dark .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid #1e1e1e;
            object-fit: cover;
        }
        
        .style-dark .profile-info {
            padding: 20px;
        }
        
        .style-dark .stats {
            background-color: #2d2d2d;
            padding: 15px;
            border-radius: 8px;
        }
        
        .style-dark .stat-item {
            text-align: center;
        }
        
        .style-dark .stat-number {
            font-weight: bold;
            display: block;
        }
        
        .style-dark .stat-label {
            font-size: 12px;
            color: #aaa;
        }
        
        /* 通用组件 */
        .nav-tabs {
            border-bottom: none;
            margin-bottom: 15px;
        }
        
        .nav-tabs .nav-item .nav-link {
            border: none;
            border-radius: 0;
            color: #666;
            font-weight: 500;
        }
        
        .nav-tabs .nav-item .nav-link.active {
            color: #1976d2;
            border-bottom: 2px solid #1976d2;
        }
        
        .btn-edit {
            background-color: #1976d2;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 14px;
            margin-top: 10px;
        }
        
        .btn-follow {
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 14px;
            margin-top: 10px;
        }
        
        /* 切换样式的控制器 */
        .style-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 10px;
            z-index: 1000;
        }
        
        .style-switcher select {
            border: none;
            background-color: transparent;
            font-size: 14px;
            outline: none;
        }
    </style>
</head>
<body>
    <!-- 样式切换器 -->
    <div class="style-switcher">
        <select id="style-selector">
            <option value="style-simple">简约风格</option>
            <option value="style-social">社交风格</option>
            <option value="style-media">媒体风格</option>
            <option value="style-brand">个人品牌风格</option>
            <option value="style-dark">暗黑风格</option>
        </select>
    </div>
    
    <!-- 我的页面容器 -->
    <div class="profile-container style-simple">
        <!-- 简约风格内容 -->
        <div class="profile-content style-simple-content">
            <!-- 个人资料头部 -->
            <div class="profile-header">
                <h1 class="h5">个人资料</h1>
            </div>
            
            <!-- 个人信息 -->
            <div class="profile-info">
                <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="avatar">
                <h2 class="h4 mt-3 mb-1">张小明</h2>
                <p class="text-muted">@xiaoming_zhang</p>
                <p class="mt-2">热爱旅行、摄影和美食的自由职业者</p>
                
                <!-- 统计数据 -->
                <div class="stats row">
                    <div class="stat-item col">
                        <span class="stat-number">128</span>
                        <span class="stat-label">作品</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">256</span>
                        <span class="stat-label">关注</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">1.2k</span>
                        <span class="stat-label">粉丝</span>
                    </div>
                </div>
                
                <!-- 编辑按钮 -->
                <button class="btn-edit">编辑资料</button>
            </div>
            
            <!-- 内容标签页 -->
            <div class="tab-content">
                <!-- 作品标签页 -->
                <div class="tab-pane active">
                    <div class="media-grid">
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=2" alt="作品1" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=3" alt="作品2" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=4" alt="作品3" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=5" alt="作品4" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=6" alt="作品5" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=7" alt="作品6" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=8" alt="作品7" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=9" alt="作品8" class="media-thumbnail"></div>
                        <div class="media-item"><img src="https://picsum.photos/200/200?random=10" alt="作品9" class="media-thumbnail"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 社交风格内容 -->
        <div class="profile-content style-social-content" style="display: none;">
            <!-- 个人资料头部 -->
            <div class="profile-header">
                <h1 class="h5">社交主页</h1>
            </div>
            
            <!-- 个人信息 -->
            <div class="profile-info">
                <div class="row align-items-center">
                    <div class="col-4">
                        <img src="https://picsum.photos/200/200?random=11" alt="用户头像" class="avatar">
                    </div>
                    <div class="col-8 text-right">
                        <h2 class="h4">李小花</h2>
                        <p class="text-muted">@xiaohua_li</p>
                        <button class="btn-follow">关注</button>
                    </div>
                </div>
                
                <p class="mt-3">生活不止眼前的苟且，还有诗和远方</p>
                
                <!-- 统计数据 -->
                <div class="stats row">
                    <div class="stat-item col">
                        <span class="stat-number">56</span>
                        <span class="stat-label">动态</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">128</span>
                        <span class="stat-label">好友</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">32</span>
                        <span class="stat-label">群聊</span>
                    </div>
                </div>
                
                <!-- 好友列表 -->
                <div>
                    <h3 class="h6 mt-4 mb-2">我的好友</h3>
                    <div class="friends-grid">
                        <img src="https://picsum.photos/100/100?random=12" alt="好友1" class="friend-avatar">
                        <img src="https://picsum.photos/100/100?random=13" alt="好友2" class="friend-avatar">
                        <img src="https://picsum.photos/100/100?random=14" alt="好友3" class="friend-avatar">
                        <img src="https://picsum.photos/100/100?random=15" alt="好友4" class="friend-avatar">
                        <img src="https://picsum.photos/100/100?random=16" alt="好友5" class="friend-avatar">
                        <img src="https://picsum.photos/100/100?random=17" alt="好友6" class="friend-avatar">
                        <img src="https://picsum.photos/100/100?random=18" alt="好友7" class="friend-avatar">
                        <img src="https://picsum.photos/100/100?random=19" alt="好友8" class="friend-avatar">
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 媒体风格内容 -->
        <div class="profile-content style-media-content" style="display: none;">
            <!-- 封面照片和头像 -->
            <div class="profile-header">
                <img src="https://picsum.photos/800/400?random=20" alt="封面照片" class="cover-photo">
                <img src="https://picsum.photos/200/200?random=21" alt="用户头像" class="avatar">
            </div>
            
            <!-- 个人信息 -->
            <div class="profile-info">
                <h2 class="h4">王小强</h2>
                <p class="text-muted">@xiaoqiang_wang</p>
                <p class="mt-2">摄影师 | 旅行家 | 美食爱好者</p>
                
                <!-- 统计数据 -->
                <div class="stats row">
                    <div class="stat-item col">
                        <span class="stat-number">320</span>
                        <span class="stat-label">作品</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">1.5k</span>
                        <span class="stat-label">关注</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">25.6k</span>
                        <span class="stat-label">粉丝</span>
                    </div>
                </div>
                
                <!-- 作品网格 -->
                <div class="media-grid">
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=22" alt="作品1" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=23" alt="作品2" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=24" alt="作品3" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=25" alt="作品4" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=26" alt="作品5" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=27" alt="作品6" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=28" alt="作品7" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=29" alt="作品8" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=30" alt="作品9" class="media-thumbnail"></div>
                </div>
            </div>
        </div>
        
        <!-- 个人品牌风格内容 -->
        <div class="profile-content style-brand-content" style="display: none;">
            <!-- 个人资料头部 -->
            <div class="profile-header">
                <h1 class="h5">个人品牌</h1>
            </div>
            
            <!-- 个人信息 -->
            <div class="profile-info">
                <img src="https://picsum.photos/200/200?random=31" alt="用户头像" class="avatar">
                <h2 class="h4 mt-3 mb-1">陈设计师</h2>
                <p class="text-muted">@designer_chen</p>
                <p class="mt-2">UI/UX设计师 | 产品经理 | 创业者</p>
                
                <!-- 个人成就 -->
                <div class="achievements">
                    <h3 class="h6 mb-3">个人成就</h3>
                    <div class="achievement-item">
                        <div class="achievement-icon"><i class="fas fa-trophy"></i></div>
                        <div>
                            <p class="mb-0 font-weight-medium">2023年度优秀设计师</p>
                            <p class="text-sm text-muted">行业协会颁发</p>
                        </div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon"><i class="fas fa-book"></i></div>
                        <div>
                            <p class="mb-0 font-weight-medium">《设计思维》作者</p>
                            <p class="text-sm text-muted">2022年出版</p>
                        </div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon"><i class="fas fa-users"></i></div>
                        <div>
                            <p class="mb-0 font-weight-medium">设计工作室创始人</p>
                            <p class="text-sm text-muted">创立于2018年</p>
                        </div>
                    </div>
                </div>
                
                <!-- 作品网格 -->
                <div class="media-grid">
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=32" alt="作品1" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=33" alt="作品2" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=34" alt="作品3" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=35" alt="作品4" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=36" alt="作品5" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=37" alt="作品6" class="media-thumbnail"></div>
                </div>
            </div>
        </div>
        
        <!-- 暗黑风格内容 -->
        <div class="profile-content style-dark-content" style="display: none;">
            <!-- 个人资料头部 -->
            <div class="profile-header">
                <h1 class="h5">个人主页</h1>
            </div>
            
            <!-- 个人信息 -->
            <div class="profile-info">
                <img src="https://picsum.photos/200/200?random=38" alt="用户头像" class="avatar">
                <h2 class="h4 mt-3 mb-1">赵晓夜</h2>
                <p class="text-muted">@xiaoye_zhao</p>
                <p class="mt-2">音乐制作人 | 程序员 | 夜猫子</p>
                
                <!-- 统计数据 -->
                <div class="stats row">
                    <div class="stat-item col">
                        <span class="stat-number">48</span>
                        <span class="stat-label">作品</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">342</span>
                        <span class="stat-label">关注</span>
                    </div>
                    <div class="stat-item col">
                        <span class="stat-number">2.8k</span>
                        <span class="stat-label">粉丝</span>
                    </div>
                </div>
                
                <!-- 作品网格 -->
                <div class="media-grid">
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=39" alt="作品1" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=40" alt="作品2" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=41" alt="作品3" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=42" alt="作品4" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=43" alt="作品5" class="media-thumbnail"></div>
                    <div class="media-item"><img src="https://picsum.photos/200/200?random=44" alt="作品6" class="media-thumbnail"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 样式切换功能
        $(document).ready(function() {
            // 获取样式选择器
            const styleSelector = $('#style-selector');
            const profileContainer = $('.profile-container');
            const profileContents = $('.profile-content');
            
            // 监听样式选择器变化
            styleSelector.on('change', function() {
                const selectedStyle = $(this).val();
                
                // 隐藏所有内容
                profileContents.hide();
                
                // 移除所有样式类
                profileContainer.removeClass('style-simple style-social style-media style-brand style-dark');
                
                // 添加选中的样式类
                profileContainer.addClass(selectedStyle);
                
                // 显示对应的内容
                $(`.${selectedStyle}-content`).show();
            });
        });
    </script>
</body>
</html>

